<template>
  <div class="pc-box">
    <div class="pc-left">
    		<div>
    			<span></span>
    			个人中心
    		</div>
    		<ul>
            <li><h3>交易管理<i class="icon"></i></h3></li>
            <li ><router-link to="/center"><span>我的账户</span></router-link></li>
           	<li ><router-link to="/indent"><span>我的订单</span></router-link></li>
            <li ><router-link to="/center"><span>我的积分</span></router-link></li>
            <li ><router-link to="/center"><span>我的易和劵</span></router-link></li>
            <li><h3>会员资料<i class="icon"></i></h3></li>
           <li ><router-link to="/center"><span>个人资料</span></router-link></li>
           <li ><router-link to="/center"><span>地址管理</span></router-link></li>
           <li ><router-link to="/center"><span>我的收藏</span></router-link></li>
           <li ><router-link to="/center"><span>最近浏览</span></router-link></li>
           <li ><router-link to="/center"><span>修改密码</span></router-link></li>
            <li><h3>站内信<i class="icon"></i></h3></li>
             <li ><router-link to="/center"><span>我的消息</span></router-link></li>
    		</ul>
    </div>
    <div class="pc-right">
    		<div class="pc-right-list">
    			<div class="pc-user">
    				<div class="pc-person">
    					<img src="http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqvDniaqhTSrrjCKh4YicmwVskXTvqRpDlZdnPjR1icjg5T07e5oh2QjobvpB8ia5dIoHXZlgQa8ibNvQg/132"/>
    					您好, <a href="###">在远方</a>
    				</div>
    				<div class="pc-item">
    					<span>当前积分</span>
    					<span>0</span>
    				</div>
    				<div class="pc-item">
    					<span>余额</span>
    					<span>￥0.00</span>
    				</div>
    				<div class="pc-item">
    					<span>易和券</span>
    					<span>0</span>
    				</div>
    			</div>
    			<div class="pc-label">
    				<h3 class="pc-sign">
    					我的会员等级
    					<i>VIP1</i>
    					<span>
    						<a href="###">去充值</a>
    					</span>
    				</h3>
    				<div class="pc-view">
                    <div class="pc-progress">
                    		<div class="pc-inside">
                    			<div style="width: 0;"></div>
                    		</div>
                    </div>
                    <div class="pc-grade">
                        <div><i>v1</i></div>
                        <div>(0-500)</div>
                    </div>
                    <div class="pc-grade">
                        <div><div>v2</div></div>
                        <div>(501-2k)</div>
                    </div>
                    <div class="pc-grade">
                        <div><div>v3</div></div>
                        <div>(2k-5k)</div>
                    </div>
                    <div class="pc-grade">
                        <div><div>v4</div></div>
                        <div>(5k-2w)</div>
                    </div>
                    <div class="pc-grade">
                        <div><div>v5</div></div>
                        <div>(2w-5w)</div>
                    </div>
                    <div class="pc-grade">
                        <div><div>v6</div></div>
                        <div>(5w-10w)</div>
                    </div>
                    <div class="pc-grade">
                        <div><div>v7</div></div>
                        <div>(10w+)</div>
                    </div>
                </div>

    			</div>
    			
    		</div>
    </div>
    		<div class="pc-right2">
    			<img src="../assets/我的账户_03.png" />
    		</div>
  </div>
</template>

<script>
export default {
	  data () {
	    return {
	     	
	    }
	  }
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.pc-box{
		width: 1180px;
    		margin: 20px auto;
	}
	.pc-right2{
		float: right;
	}
	.pc-left{
		float: left;
	    width: 173px;
	    border: 1px solid #d3d3d3;
	    background: #fff;
	}
	.pc-left>div{
		padding: 15px;
	    font-size: 16px;
	    color: #666;
	    border-bottom: 1px solid #d3d3d3;
	}
	.pc-left>div>span{
		vertical-align: middle;
	    width: 24px;
	    height: 28px;
	    background-position: 1px -15px;
		display: inline-block;
	    background-image: url(../../../img/icons.png);
	    background-repeat: no-repeat;
	    font-style: normal;
	}
	.pc-left ul{
		margin: 0;
		padding: 10px 0;
		list-style: none;
	}
	.pc-left li{
		height: 40px;
	}
	.pc-left li:hover{
		color: #f60;
		
	}
	.pc-left ul:hover{
		text-decoration: block;
	}
	
	.pc-left h3{
		line-height: 40px;
	    font-size: 16px;
	    margin: 0px 15px;
	    color: #333;
	    position: relative;
	}
	.pc-left i{
		width: 40px;
	    height: 40px;
	    position: absolute;
	    right: 0;
	    top: 0;
	    background-position: 33px -449px;
	    display: inline-block;
	    background-image: url(../../../img/icons.png);
	    background-repeat: no-repeat;
	    font-style: normal;
	}
	.pc-left>ul span{
		display: block;
	    line-height: 40px;
	    font-size: 14px;
	    padding: 0px 15px;
	    color: #666;
	    text-decoration: none;
	}
	.pc-right{
		margin: 0 0 0px 195px;
	}
	.pc-right-list{
		margin: 0 0 20px 0;
	    border: 1px solid #d3d3d3;
	    background: #fff;
	}
	.pc-user{
		overflow: hidden;
	    padding: 15px;
	    background: #FEF4EB;
	    border-bottom: 1px solid #d3d3d3;
	}
	.pc-person{
		float: left;
	    height: 100px;
	    width: 400px;
	    line-height: 100px;
	    color: #666;
	    font-size: 16px;
	}
	.pc-person>a{
		color: #ff6c00;
    		text-decoration: none;
	}
	.pc-person>img{
		float: left;
	    width: 100px;
	    height: 100px;
	    overflow: hidden;
	    margin: 0 20px 0 0;
	}
	.pc-item{
		float: left;
	    width: 19.3%;
	    height: 100px;
	}
	.pc-item>span:nth-child(1){
		font-size: 16px;
	    color: #ff6c00;
	    margin: 25px 0 0 0;
	    display: block;
	    height: 30px;
	    line-height: 30px;
	    text-align: center;
	}
	.pc-item>span:nth-child(2){
		display: block;
	    height: 30px;
	    line-height: 30px;
	    font-size: 14px;
	    color: #666;
	    text-align: center;
	}
	.pc-label{
		overflow: hidden;
    		padding: 30px 15px;
	}
	.pc-sign{
		height: 40px;
	    line-height: 40px;
	    color: #666;
	    font-weight: normal;
	    font-size: 16px;
	    margin: 0 0 20px;
	}
	.pc-sign>i{
		color: #ff6c00;
    		font-size: 24px;
	}
	.pc-sign>span{
		line-height: 30px;
	}
	.pc-sign a{
		text-decoration: none;
	    border-radius: 5px;
	    color: rgb(255, 255, 255);
	    display: inline-block;
	    background: rgb(255, 108, 0) none repeat scroll 0px 0px;
	    margin-right: 40px;
	    margin-top: 10px;
	    padding: 0px 10px 0 10px;
	    float: right;
	}
	.pc-view{
		overflow: hidden;
	    margin: 0 -40px;
	    position: relative;
	}
	.pc-progress{
		position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 0;
	}
	.pc-inside{
		height: 6px;
	    background: #d3d3d3;
	    margin: 18px 75px;
	    overflow: hidden;
	}
	.pc-inside>div{
		float: left;
	    width: 0%;
	    height: 6px;
	    background: #ff6c00;
	}
	.pc-grade{
		float: left;
	    width: 14%;
	    text-align: center;
	    position: relative;
	}
	.pc-grade>div:nth-child(1){
		display: inline-block;
	    height: 30px;
	    width: 30px;
	    border-radius: 50%;
	    border: 5px solid #fff;
	    color: #fff;
	    font-size: 16px;
	    text-align: center;
	    line-height: 30px;
	    background: #ff6c00;
	}
	.pc-grade>div:nth-child(2){
		width: 100%;
	    height: 20px;
	    line-height: 20px;
	    font-size: 14px;
	    color: #666;
	    text-align: center;
	}
</style>

